<template>
    <div class="tops">
        <span class="title">OA办公后台管理系统</span>
        <div class="home">
            <router-link to="/content">
            <img src="../assets/img/oa1.svg" alt="">
            <p>首页</p></router-link>
            
        </div>
        <div class="apply"  @click="block()">
            <img src="../assets/img/oa2.svg" alt="" >
            <p>{{title}}</p>
            
        </div>
        <ul class="shows" v-show="bol">
            <li v-for="(item,index) in branch"  :key="index" @click="blocks(index)" >
                <router-link :to="item.address">
                    <img :src="item.img" alt="">
                    <p>{{item.title}}</p>
                </router-link>
                
            </li>
        </ul>
        <div class="inputs">
            <img src="../assets/img/oa4.svg" alt="">
            <input type="text" placeholder="请输入关键字">
        </div>
        <div class="top-right">
            <div class="message-box">
                <div class="message">
                    <img  src="../assets/img/oa3.svg" alt="">
                </div>
                <div class="messages">
                    <img  src="../assets/img/oa6.svg" alt="">
                </div>
            </div>
                
            <div class="users-img">
                <img class="user-img" src="../assets/img/oa9.png" alt="">
                <p>user</p>
                <img src="../assets/img/oa5.svg" alt="">
            </div>
      </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            bol:false,
            title:'应用中心',

            branch :[
                {
                    img:require('../assets/img/oa31.svg'),
                    title:'组织',
                    address:'/Organize'
                },
                {
                    img:require('../assets/img/oa32.svg'),
                    title:'员工',
                    address:'/Staff'
                },
                {
                    img:require('../assets/img/oa33.svg'),
                    title:'考勤',
                    address:'/Present'
                },
                {
                    img:require('../assets/img/oa34.svg'),
                    title:'酬薪',
                    address:'/Salary'
                },
                {
                    img:require('../assets/img/oa35.svg'),
                    title:'社保公积金',
                    address:'/SocialSecurity'
                },
                {
                    img:require('../assets/img/oa36.svg'),
                    title:'绩效',
                    address:'/Performance'
                },
                {
                    img:require('../assets/img/oa37.svg'),
                    title:'招聘',
                    address:'/Hire'
                },
                {
                    img:require('../assets/img/oa38.svg'),
                    title:'审批',
                    address:'/Approve'
                },
                {
                    img:require('../assets/img/oa39.svg'),
                    title:'会议室预定',
                    address:'/ConforenceRoom'
                },
                {
                    img:require('../assets/img/oa40.svg'),
                    title:'车辆',
                    address:'/Car'
                },
                {
                    img:require('../assets/img/oa41.svg'),
                    title:'新闻',
                    address:'/News'
                },
                {
                    img:require('../assets/img/oa42.svg'),
                    title:'公告',
                    address:'/Notice'
                },
                {
                    img:require('../assets/img/oa43.svg'),
                    title:'合同库',
                    address:'/Contract'
                },
                {
                    img:require('../assets/img/oa44.svg'),
                    title:'文档库',
                    address:'/Archive'
                },
                {
                    img:require('../assets/img/oa45.svg'),
                    title:'资产',
                    address:'/Property'
                },
                {
                    img:require('../assets/img/oa46.svg'),
                    title:'培训',
                    address:'/Training'
                },
                {
                    img:require('../assets/img/oa47.svg'),
                    title:'系统设置',
                    address:'/System'
                }]
        }
    },
    methods:{
        block(){
            this.bol=!this.bol
        },
        blocks(index){
            this.title=this.branch[index].title
            this.bol=!this.bol
            
        },
        handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>
<style lang="scss" scoped>
    .tops{
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        background-color: #2561ef;
        position: fixed;
        top: 0;
        z-index: 10;
        .title{
            width: 165px;
            height: 25px;
            font-size: 16px;
            margin-left: 20px;
            font-weight: 500;
            color: #ffffff;
        }
    }
    .apply,.home{
        width: 100px;
        height: 60px;
        font-size: 14px;
        margin-left: 25px;
        padding: 13px 0;
        text-align: center;
        color: #ffffff;
        box-sizing: border-box;
        cursor: pointer;
        p{
            width: 100px;
            height: 20px;
            line-height: 20px;
        }
        &:hover{
            background-color: rgba(0, 51, 204, .5);
            border-bottom: 3px solid #ffffff;
        }
    }
    .inputs{
        position: relative;
        left: 5%;
        img{
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        input{
            width: 400px;
            height: 40px;
            border-radius: 10px;
            padding-left: 35px;
            border: none;
            outline: none;
        }
        
    }
    .message-box{
        cursor: pointer;
    }
    .top-right{
        width: 160px;
        height: 60px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        right: 50px;
        .message{
            width: 14px;
            height: 18px;
            margin-right: 10px;
        }
        .messages{
            position: absolute;
            left: 7px;
            top: 12px;
        }
       .users-img{
            display: flex;
            align-items: center;
            cursor: pointer;
                p{
                    font-weight: 600;
                }
                img{
                    &:nth-of-type(2){
                        width: 9px;
                        height: 6px;
                        margin-left: 5px;
                    }
                }
        .user-img{
            width: 40px;
            height: 40px;
            border-radius: 6px;
            margin: 0 10px;
        }
        }
    }
    .shows{
        width: 445px;
        height: 365px;
        color: #333333;
        border-radius: 8px;
        padding: 15px;
        box-sizing: border-box;
        z-index: 10;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        list-style: none;
        background-color: rgba(255, 255, 255, 1);
        border-color: rgba(228, 228, 228, 1);
        box-shadow: 0px 10px 30px rgba(228, 228, 228, 1);
        position: absolute;
        top: 80px;
        left: 10%;
        li{
            width: 75px;
            height: 75px;
            margin: 4px;
            border-radius: 3px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img{
                width: 24px;
                height: 24px;
                // vertical-align: middle;
            }
            p{
                width: 80px;
                font-size: 14px;
                color: #333333;
                margin-top: 5px;
            }
            &:hover{
                background-color: rgba(37, 97, 239, 0.2);
            }
        }
    }

    .el-menu{
    width: 200px;
    height: 100vh;
    margin-top: 60px;
}
    .txet-color{
    color: #333;
}
a{
    text-decoration: none;
    color: #ffffff;
}
</style>
